<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价（元）</div>
                <div class="cart-th4">数量</div>
                <div class="cart-th5">小计（元）</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul class="cart-list" v-for="(cartInfo) in cartInfoList" :key="cartInfo.id">
                    <li class="cart-list-con1">
                        <input type="checkbox" name="chk_list" v-model="cartInfo.isChecked"
                            @change="changeChecked(cartInfo.skuId,$event.target.checked)">
                    </li>
                    <li class="cart-list-con2">
                        <img :src="cartInfo.imgUrl">
                        <div class="item-msg">{{cartInfo.skuName}}</div>
                    </li>
                    <li class="cart-list-con4">
                        <span class="price">{{cartInfo.skuPrice}}</span>
                    </li>
                    <li class="cart-list-con5">
                        <a href="javascript:void(0)" class="mins" @click="updateSkuNum(cartInfo, -1, 'minus')">-</a>
                        <input autocomplete="off" type="text" class="itxt" :value="cartInfo.skuNum" minnum="1"
                            @input="updateSkuNum(cartInfo, $event.target.value*1, 'input')">
                        <a href="javascript:void(0)" class="plus" @click="updateSkuNum(cartInfo, 1, 'add')">+</a>
                    </li>
                    <li class="cart-list-con6">
                        <span class="sum">{{cartInfo.skuNum * cartInfo.skuPrice}}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a href="#none" class="sindelet" @click="deleteOne(cartInfo.skuId)">删除</a>
                        <br>
                        <a href="#none">移到收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input class="chooseAll" type="checkbox" @change="changeAllChecked" v-model="isAllChecked">
                <span>全选</span>
            </div>
            <div class="option">
                <a href="#none" @click="deleteAllChecked">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择
                    <span>{{checkeds}}</span>件商品</div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{totalPrice}}</i>
                </div>
                <div class="sumbtn">
                    <router-link class="sum-btn" to="/trade">结算</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapGetters
    } from 'vuex';
    import throttle from 'lodash/throttle';

    export default {
        name: 'ShopCart',
        created() {
            this.getShopCart();
        },
        computed: {
            ...mapGetters(['cartInfoList']),
            //计算商品是否全部选中且不是空数组
            isAllChecked: {
                get() {
                    return this.cartInfoList.every((item) => item.isChecked == 1) && this.cartInfoList.length > 0;
                },
                set(val) {
                    return val;
                }
            },
            //计算共有多少件商品
            checkeds() {
                let count = 0;
                this.cartInfoList.some(item => {
                    if (item.isChecked) count++
                });
                return count;
            },
            //计算总价
            totalPrice() {
                let price = 0;
                this.cartInfoList.forEach(item => {
                    if (item.isChecked) price += item.skuNum * item.skuPrice;
                });
                return price;
            }
        },
        methods: {
            //封装获取购物车数据的方法
            getShopCart() {
                this.$store.dispatch('getShopCartList');
            },
            //修改物品数量的方法，此处用节流控制，cartInfo：商品信息， disNum：修改数值， type：修改类型
            updateSkuNum: throttle(async function (cartInfo, disNum, type) {
                switch (type) {
                    case 'add':
                        disNum = 1;
                        break;
                    case 'minus':
                        disNum = -1;
                        break;
                    case 'input':
                        //判断是否是纯数字或者小于1
                        if (isNaN(disNum) || disNum < 1) {
                            disNum = 0;
                        } else {
                            //取整
                            disNum = parseInt(disNum) - cartInfo.skuNum;
                        }
                        break;
                }
                //用try-catch抛出修改失败
                try {
                    //返回promise类型
                    await this.$store.dispatch('getAddOrUpdateShopCart', {
                        id: cartInfo.skuId,
                        count: disNum
                    });
                    this.getShopCart();
                } catch (error) {
                    alert('修改失败！！！')
                }
            }, 500),

            //修改单个商品的勾选状态
            async changeChecked(skuId, isChecked) {
                //获取到的checked是布尔值，转为数字
                if (isChecked) {
                    isChecked = 1
                } else {
                    isChecked = 0
                }
                //派发请求
                try {
                    await this.$store.dispatch('changeChecked', {
                        skuId,
                        isChecked
                    });
                    this.getShopCart();
                } catch (error) {
                    alert('修改失败！！！')
                }
            },

            //改变所有商品的勾选状态
            async changeAllChecked(e) {
                let checked = e.target.checked ? 1 : 0;
                try {
                    await this.$store.dispatch('changeAllChecked', checked);
                    this.getShopCart();
                } catch (error) {
                    alert('修改失败!!!');
                }
            },

            //删除商品
            async deleteOne(skuId) {
                try {
                    await this.$store.dispatch('deleteShopCart', skuId);
                    this.getShopCart();
                } catch (error) {
                    alert(error);
                }
            },

            //删除已选中的商品
            async deleteAllChecked() {
                try {
                    await this.$store.dispatch('deleteAllChecked');
                    this.getShopCart();
                } catch (error) {
                    alert('删除失败!!!');
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .cart {
        width: 1200px;
        margin: 0 auto;

        h4 {
            margin: 9px 0;
            font-size: 14px;
            line-height: 21px;
        }

        .cart-main {
            .cart-th {
                background: #f5f5f5;
                border: 1px solid #ddd;
                padding: 10px;
                overflow: hidden;

                &>div {
                    float: left;
                }

                .cart-th1 {
                    width: 25%;

                    input {
                        vertical-align: middle;
                    }

                    span {
                        vertical-align: middle;
                    }
                }

                .cart-th2 {
                    width: 25%;
                }

                .cart-th3,
                .cart-th4,
                .cart-th5,
                .cart-th6 {
                    width: 12.5%;

                }
            }

            .cart-body {
                margin: 15px 0;
                border: 1px solid #ddd;

                .cart-list {
                    padding: 10px;
                    border-bottom: 1px solid #ddd;
                    overflow: hidden;

                    &>li {
                        float: left;
                    }

                    .cart-list-con1 {
                        width: 15%;
                    }

                    .cart-list-con2 {
                        width: 35%;

                        img {
                            width: 82px;
                            height: 82px;
                            float: left;
                        }

                        .item-msg {
                            float: left;
                            width: 150px;
                            margin: 0 10px;
                            line-height: 18px;
                        }
                    }

                    .cart-list-con4 {
                        width: 10%;

                    }

                    .cart-list-con5 {
                        width: 17%;

                        .mins {
                            border: 1px solid #ddd;
                            border-right: 0;
                            float: left;
                            color: #666;
                            width: 6px;
                            text-align: center;
                            padding: 8px;
                        }

                        input {
                            border: 1px solid #ddd;
                            width: 40px;
                            height: 33px;
                            float: left;
                            text-align: center;
                            font-size: 14px;
                        }

                        .plus {
                            border: 1px solid #ddd;
                            border-left: 0;
                            float: left;
                            color: #666;
                            width: 6px;
                            text-align: center;
                            padding: 8px;
                        }
                    }

                    .cart-list-con6 {
                        width: 10%;

                        .sum {
                            font-size: 16px;
                        }
                    }

                    .cart-list-con7 {
                        width: 13%;

                        a {
                            color: #666;
                        }
                    }
                }
            }
        }

        .cart-tool {
            overflow: hidden;
            border: 1px solid #ddd;

            .select-all {
                padding: 10px;
                overflow: hidden;
                float: left;

                span {
                    vertical-align: middle;
                }

                input {
                    vertical-align: middle;
                }
            }

            .option {
                padding: 10px;
                overflow: hidden;
                float: left;

                a {
                    float: left;
                    padding: 0 10px;
                    color: #666;
                }
            }

            .money-box {
                float: right;

                .chosed {
                    line-height: 26px;
                    float: left;
                    padding: 0 10px;
                }

                .sumprice {
                    width: 200px;
                    line-height: 22px;
                    float: left;
                    padding: 0 10px;

                    .summoney {
                        color: #c81623;
                        font-size: 16px;
                    }
                }

                .sumbtn {
                    float: right;

                    a {
                        display: block;
                        position: relative;
                        width: 96px;
                        height: 52px;
                        line-height: 52px;
                        color: #fff;
                        text-align: center;
                        font-size: 18px;
                        font-family: "Microsoft YaHei";
                        background: #e1251b;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>